Getting Started
Stylesheet
Basic HTML Structure
Other Information


Azia Documentation v1.1

Thank you so much for purchasing our theme. If you have any questions that are beyond the scope of this help file, please feel free to email us at themepixels@gmail.com or submit a comment to this template. Thanks so much!

Getting Started

Azia, a modern and clean Bootstrap 4 admin & dashboard template using modern and minimal design. It is fully responsive built using SASS preprocessor, HTML5, CSS3 and jQuery plugins. It uses most of the helper/utilities classes which are reusable class that makes the page faster and increases the speed of page time load. It can be used for most type of dashboard and app templates like analytics, admin or messenger app for your desktpo or mobile applications. Amazing flexibility and reusability. See the demo.

Introduction

This part of the doc will help you to quick start your project and will give you a basic idea about how azia work. For you to get start open the "themes" folder in templates/ of your download package.

What's Included

Once you have download the package you will see the following folder structure inside zip package file.

Folder/File Description
css/ Includes every styles from the scss folder built into a single css file, also added with minified version.
img/ all image files used in the demo of this template
js/ all js files needed for this template.
lib/ all third party plugin files that needed for this template.
scss/ The scss files used in this template when compiled will goes to app/css folder
starters/ dashboard starter template use in 10 pre-built dashboard demo
template/ all html files for this template
.gitignore A pre-made list of files and folders to be ignored during commit when using git
change-log.txt Contains a list of changes and changes made in every version of the template.
gulpfile.js A code used to configure or define tasks and load gulp plugins.
index.html The base index file when running local server.
package.json Contains a list of dependencies and some script that Gulp will use to install dependencies and plugins of gulp.
README.md An file that describes about this template.

Note: If you are still unsure of what's the use of this files, you may want to proceed to the next topic:


NodeJS

Before installing gulp and sass first you must have NodeJs installed, NodeJS will have npm (node packaged modules).

Node.js is a JavaScript runtime built on Chrome's V8 JavaScript engine. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient. Node.js' package ecosystem, npm, is the largest ecosystem of open source libraries in the world.

Online Reference: https://nodejs.org/en/

Installing in Mac

Simply download the Macintosh Installer direct from the nodejs.org web site.

If you want to download the package with bash:

curl "https://nodejs.org/dist/latest/node-${VERSION:-$(wget -qO- https://nodejs.org/dist/latest/ | sed -nE 's|.*>node-(.*)\.pkg.*|\1|p')}.pkg" > "$HOME/Downloads/node-latest.pkg" && sudo installer -store -pkg "$HOME/Downloads/node-latest.pkg" -target "/"

Using Homebrew:

brew install node

Installing in Windows

Simply download the Windows Installer direct from the nodejs.org web site.



Gulp JS

Before installing gulp first you must have NodeJs installed, NodeJS will have npm (node packaged modules).

Gulp is a toolkit for automating painful or time-consuming tasks in your development workflow, so you can stop messing around and build something.

Online Reference: https://gruntjs.com/

Installing the CLI

If you have previously installed a version of gulp globally, please run npm rm --global gulp to make sure your old version doesn't collide with gulp-cli.

$ npm install -g gulp-cli

Verify that gulp is successfully installed, and version of installed gulp will appear.

$ gulp --version


SASS

Before running grunt first you must check if you have sass installed in your machine. You can verify that sass is already installed by running the command.

$ sass --version

If version appear, it means sass already installed in your machine and proceed to the next topic, otherwise follow the instructions below on installing sass.

Installing SASS

Windows

Before you start using Sass you will need to install Ruby. The fastest way to get Ruby on your Windows computer is to use Ruby Installer. It's a single-click installer that will get everything set up for you super fast.

Mac

If you prefer the command line over an application then getting Sass set up is a fairly quick process. Sass has a Ruby dependency but if you're using a Mac, congratulations, Ruby comes pre-installed.

Install SASS

Ruby uses Gems to manage its various packages of code like Sass. In your open terminal or cmd window:

$ gem install sass

You should now have Sass installed, but it never hurts to double-check.

$ sass --version

Online Reference: http://sass-lang.com/install

Running Azia

You're moments away to see the azia dashboard template up and running in your local machine. First, go to the root folder where the package.json located. In your download package it should be in the root folder. Please run the following command below.

Note: Running azia to you local machine is not a requirements for you to see the template. You can directly browse to the template folder and choose any html file you want to open by opening it directly to the browser.

$ npm install

This will download all dependencies defined in package.json file. Once it finished running the command, it will generate a folder name node_modules/ where you see downloaded files.Next, run another command below

$ gulp npm-lib

This will extract all dependencies defined in package.json file. Once it finished running the command, it will generate a folder name lib/ where you see extracted files.

Running in Browser

Now you're good to go in running the template and preview it in browser by running the command below.

$ gulp serve

The template is now up and running in your browser. Feel free to visit each page and familiarize the flow of it.


Stylesheet

We use SASS in creating styles in this template logically grouping into sections. Below are the structure of sass files and folders

Folder/File Description
bootstrap/ Contains override styles from Bootstrap core framework for custom design and enhancement
custom/ some additional components styles.
layout/ a panel style to a specific part of the template.
lib/ Contains a custom styles from plugins that override the current design for improvements
template/ Contain a specific styles only to that pages.
util/ Contain a helper and very reusable classes.
azia.scss Imports all scss file into one file for compiling into css


Bootstrap

All of the files organized into a name of element are override styles of Bootstrap core framework styles. It is overriden for performance and design quality improvement purposes.

To learn more about Bootstrap, visit their site at https://getbootstrap.com/



Plugins

All files organized into a name of plugin are override styles from some of the plugins used in this template and can be found in lib/ folder. It is also overriden for performance and design quality improvement purposes.



Utilities

Utilities classes are very reusable classes with a single purpose to reduce the frequency of highly repetitive declarations.

Note: Below are some of the classes that we think are more reusable. If you did not find any classes on the list be sure to check the scss files under scss/utilities/ folder if there are any existing classes you need before you can create a new style.

Background Color

Class Value
.bg-transparent Sets a transparent background to an element with already have a background color.
.bg-gray-[value] 900 | 800 | 700 | 600 | 500 | 400 | 300 | 200 | 100
.bg-[value] primary | success | warning | danger | info | indigo | purple | purple-dark | teal | pink | orange
.bg-white-[value] 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9
.bg-black-[value] 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9

Borders

Class Value / Description
.bd Add border in all sides of an element with default color gray and default width of 1px.
.bd-t Add border to top side of element.
.bd-r Add border to right side of element.
.bd-b Add border to bottom side of element.
.bd-l Add border to left side of element.
.bd-x Add border to left and right side of element.
.bd-y Add border to top and bottom side of element.
.bd Set 1px (default) border to element.
.bd-2 Set 2px border to element.
.bd-3 Set 3px border to element.
.bd-4 Set 4px border to element.
.bd-5 Set 5px border to element.
.bd-t-0 Remove top border of an element
.bd-r-0 Remove right border of an element
.bd-b-0 Remove bottom border of an element
.bd-l-0 Remove left border of an element
.bd-x-0 Remove left and right border of an element
.bd-y-0 Remove top and bottom border of an element
.bd-[t||r|bl|x|y]-0-force Force remove border of any side of an element.
.bd-[value] primary | success | warning | danger | info | indigo | purple | pink | teal | orange
.bd-gray-[value] 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
.rounded Set a border radius of 3px (default) to an element.
.rounded-[value] 5 | 10 | 20 | 30 | 40 | 50 | circle
.rounded-[value] top | right | bottom | left

Height

Class Value
.ht-[value] 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10
.ht-[value] 15 | 20 | 25 | 30 | ... | 100   (step of 5)
.ht-[value] 150 | 200 | 250 | 300 | ... | 850   (step of 50)
.ht-[value]p 10 | 20 | 30 | 40 | ... | 100   (step of 10)
.ht-[size]-[value]

size: xs | sm | md | lg | xl

value: the height value (refer to code above)

.ht-[size]-[value]p
.ht-100v Set a height to an element based on viewport height.
.ht-auto Set an auto height to an element.

Width

Class Value
.wd-[value] 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10
.wd-[value] 15 | 20 | 25 | 30 | ... | 100   (step of 5)
.wd-[value] 150 | 200 | 250 | 300 | ... | 1000   (step of 50)
.wd-[value]p 10 | 20 | 30 | 40 | ... | 100   (step of 10)
.wd-[size]-[value]

size: xs | sm | md | lg | xl

value: the width value (refer to code above)

.wd-[size]-[value]p
.wd-100v Set a width to an element based on viewport width.
.wd-auto Set an auto width to an element.

Margins

Class Value
.mg-t-[value]
.mg-r-[value]
.mg-b-[value]
.mg-l-[value]
1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10
.mg-t-[value]
.mg-r-[value]
.mg-b-[value]
.mg-l-[value]
15 | 20 | 25 | 30 | ... | 120   (step of 5)
.mg-[size]-t-[value]
.mg-[size]-r-[value]
.mg-[size]-b-[value]
.mg-[size]-l-[value]

size: xs | sm | md | lg | xl

value: the margin value (refer to code above)

.mg-t-auto Set a top margin to auto
.mg-r-auto Set a right margin to auto
.mg-b-auto Set a bottom margin to auto
.mg-l-auto Set a left margin to auto

Padding

Class Value
.pd-t-[value]
.pd-r-[value]
.pd-b-[value]
.pd-l-[value]
1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10
.pd-t-[value]
.pd-r-[value]
.pd-b-[value]
.pd-l-[value]
15 | 20 | 25 | 30 | ... | 120   (step of 5)
.pd-t-[value]
.pd-r-[value]
.pd-b-[value]
.pd-l-[value]
110 | 120 | 130 | 140 | ... | 200   (step of 10)
.pd-[size]-t-[value]
.pd-[size]-r-[value]
.pd-[size]-b-[value]
.pd-[size]-l-[value]

size: xs | sm | md | lg | xl

value: the padding value (refer to code above)


Position

Class Value
.pos-relative Set a relative position to an element.
.pos-absolute Set an absolute position to an element.
.pos-fixed Set a fixed position to an element.
.pos-static Set a static position to an element.
.t-[value] 0 | 5 | 10 | 15 | ... | 100 (step of 5)
.r-[value] 0 | 5 | 10 | 15 | ... | 100 (step of 5)
.b-[value] 0 | 5 | 10 | 15 | ... | 100 (step of 5)
.l-[value] 0 | 5 | 10 | 15 | ... | 100 (step of 5)
.x-[value] 0 | 5 | 10 | 15 | ... | 100 (step of 5)
.y-[value] 0 | 5 | 10 | 15 | ... | 100 (step of 5)
.a-[value] 0 | 5 | 10 | 15 | ... | 100 (step of 5)
.t--[value] 0 | 5 | 10 | 15 | ... | 100 (step of 5)
.r--[value] 0 | 5 | 10 | 15 | ... | 100 (step of 5)
.b--[value] 0 | 5 | 10 | 15 | ... | 100 (step of 5)
.l--[value] 0 | 5 | 10 | 15 | ... | 100 (step of 5)
.z-index-[value] 10 | 50 | 100 | 150 | 200

Typography

Class Value
.tx-[size] 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16
.tx-[size] 18 | 20 | 22 | 24 | ... | 140 (step of 2)
.tx-[viewport]-[size] viewport: xs | sm | md | lg | xl
size: 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16
.tx-[viewport]-[size] viewport: xs | sm | md | lg | xl
size: 18 | 20 | 22 | 24 | ... | 140 (step of 2)
.tx-[weight] bold | semibold | medium | normal | light | thin | xthin
.tx-[viewport]-[weight] viewport: xs | sm | md | lg | xl
weight: bold | semibold | medium | normal | light | thin | xthin
.tx-[family] poppins | hind | firasans (default) | roboto | source
.tx-[color] primary | success | warning | danger | info | indigo | purple | orange | teal | pink | black | white | inverse
.tx-gray-[num] 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
.tx-white-[transparency] 2 | 3 | 4 | 5 | 6 | 7 | 8
.tx-spacing-[value] 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8
.tx-spacing--[value] 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 (negative spacing result)
.lh-[value] 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15
.lh-[viewport]-[value] viewport: xs | sm | md | lg | xl
value: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15

If you have any questions that are beyond the scope of this class reference, please feel free to email us at themepixels@gmail.com. Thanks so much!


Basic HTML Structure

Header Panel

<div class="az-header">
  <div class="container">
    <div class="az-header-left">...</div>
    <div class="az-header-center">...</div>
    <div class="az-header-right">...</div>
  </div><!-- container -->
</div><!-- az-header -->

Class Reference Description
.az-header The parent element class of header
.container / .container-fluid Set .container class for fixed width of header, otherwise .container-fluid for fluid width.
.az-header-left A wrapper element displayed in the left portion of header (ie. logo)
.az-header-center A wrapper element class in the center portion of header (ie. search box)
.az-header-right A wrapper element class in the right portion of header (ie. notification, logged user, etc.)

Navbar

Below is the html structure of the navbar of this dashboard or admin template that includes menu and icon menu. This navbar will turn into sidebar when in mobile.

<div class="az-navbar">
  <div class="container">
    <div><a href="../template/index.html" class="az-logo">az<span>i</span>a</a></div>
    <div class="az-navbar-search">
      <input type="search" class="form-control" placeholder="Search for anything...">
      <button class="btn"><i class="fas fa-search "></i></button>
    </div><!-- az-navbar-search -->
    <ul class="nav">
      <li class="nav-label">Main Menu</li>
      <li class="nav-item active show">
        <a href="" class="nav-link with-sub"><i class="typcn typcn-clipboard"></i>Dashboard</a>
        <nav class="nav-sub">
          <a href="dashboard-one.html" class="nav-sub-link active">Web Analytics</a>
          ...
        </nav>
      </li><!-- nav-item -->
    </ul><!-- nav -->
  </div><!-- container -->
</div><!-- az-navbar -->

Class Reference Description
.az-navbar The parent wrapper element class for the navbar of this template.
.container/.container-fluid This class only applies to desktop devices only. Set .container for fixed width of navbar otherwise set .container-fluid for fluid width.
.az-navbar-search This only displays in mobile devices only other than that this element is hidden.
.nav-label This will only displayed in mobile devices only when navbar turns into sidebar for mobile. Displays hidden when in large screen resolution.
.nav-item The parent element of navbar menu link. Added .active class when menu is active and .show when menu shows a sub menu.
.with-sub Additional class to .nav-link that displays an indicator that the menu have sub menu in it.
.nav-sub The sub menu wrapper of navbar
.nav-sub-link The link item of navbar's sub-menu

Sidebar

This is another layout variant of the template where the page have sidebar in it. To better understand the full html structure of page using sidebar layout, please see starters/dashboard-two.html file.

<body class="az-body-sidebar">
  <div class="az-sidebar">
    <div class="az-sidebar-header">...</div>
    <div class="az-sidebar-loggedin">...</div>
    <div class="az-sidebar-body">...</div>
  </div><!-- az-sidebar -->
  <div class="az-content">...</div>
</body>

Class Reference Description
.az-body-sidebar Required class to be added in <body> tag when using sidebar layout of this template.
.az-sidebar The sidebar parent class element.
.az-sidebar-header The header element of sidebar where you can add logo, (forward and back button for mobile) or any element that you'd like to add.
.az-sidebar-loggedin This element contains the thumbnail of user logged in and profile menu (ie. edit profile, signout, etc.)
.az-sidebar-body This element contains the sidebar menu using the same structure of the navbar.
.az-content This is the wrapper where you can add your main page content of the page.

Iconbar

This is another layout variant of the template where the page have iconbar in left portion of the page along with it's sub menu. To better understand the full html structure of page using iconbar layout, please see starters/dashboard-three.html file.

<div class="az-iconbar">
  <a href="../template/index.html" class="az-iconbar-logo"><i class="typcn typcn-chart-bar-outline"></i></a>
  <nav class="nav">
    <a href="#asideDashboard" class="nav-link active"><i class="typcn typcn-device-laptop"></i></a>
    <a href="#asideAppsPages" class="nav-link"><i class="typcn typcn-calendar-outline"></i></a>
    ...
  </nav>
  <div class="az-iconbar-bottom">
    <a href="" class="az-iconbar-help"><i class="far fa-question-circle"></i></a>
    <a href="" class="az-img-user online"><img src="../img/img1.jpg" alt=""></a>
  </div><!-- az-iconbar-bottom -->
</div><!-- az-iconbar -->
<div class="az-iconbar-aside">
  <div class="az-iconbar-header">
    <a href="../template/index.html" class="az-logo">az<span>i</span>a</a>
    <a href="" class="az-iconbar-toggle-menu">
      <i class="icon ion-md-arrow-back"></i>
      <i class="icon ion-md-close"></i>
    </a>
  </div><!-- az-iconbar-header -->
  <div class="az-iconbar-body">
    <div id="asideDashboard" class="az-iconbar-pane">
      <h6 class="az-iconbar-title">Dashboard</h6>
      <small class="az-iconbar-text">Choose between layouts to experience different look and feel for your projects.</small>

      <nav class="nav">
        <a href="dashboard-one.html" class="nav-link">Web Analytics</a>
        ...
      </nav>
    </div>
    ...
  </div><!-- az-iconbar-body -->
</div><!-- az-iconbar-aside -->

Class Reference Description
.az-iconbar The parent element wrapper class of iconbar
.az-iconbar-bottom The bottom portion of the iconbar (ie. profile thumbnail, signout, etc.)
.az-iconbar-aside This serves like a dropdown of the iconbar menu where you can find the sub menus of iconbar and some description of it.
.az-iconbar-header The header portion of the iconbar aside element
.az-iconbar-body This is where you can find the iconbar item description and it's sub menu

Footer

This is the only layout used for footer of this template and displays as hidden when viewed in smaller devices.

<div class="az-footer">
  <div class="container">
    <span>&copy; 2018 Azia Responsive Bootstrap 4 Dashboard Template</span>
    <span>Designed by: ThemePixels</span>
  </div><!-- container -->
</div><!-- az-footer -->

Class Reference Description
.az-footer The parent element wrapper class of footer

Elements

The HTML Markup of alerts, buttons, etc. are explained in the bootstrap documentation or in thelive preview of this template. Feel free to use it in your page. Any components that are beyond of this template, may submit a request and suggestion to our email at themepixels@gmail.com


Known Issue




Changelog

v1.1

*** PLUGINS *** *** PANELS *** *** APPS *** *** PAGES *** *** COMPONENTS *** *** HELPER/UTILITIES ***

v1.0


References


Plugins Link
Bootstrap https://getbootstrap.com/
Chart JS http://www.chartjs.org/
CryptoFont @AMPoellmann
DataTables https://datatables.net/
Flag Icon CSS https://github.com/lipis/flag-icon-css
Flot http://www.flotcharts.org/
Flot CurvedLines Michael Zinsmaier and nergal.dev
FontAwesome http://fontawesome.io/
FullCalendar https://fullcalendar.io/
GMaps https://hpneo.github.io/gmaps/
IonRangeSlider IonDen.com
Ionicons http://ionicons.com/
jQuery https://jquery.com/
jQuery Sparkline http://digitalbush.com/projects/masked-input-plugin/
jQuery Steps http://www.jquery-steps.com/
jQuery UI https://jqueryui.com/
jQuery MaskedInput https://digitalbush.com/projects/masked-input-plugin/
jQVMap http://jqvmap.com
Leaflet http://leafletjs.com
LightSlider https://github.com/sachinchoolur/lightslider
LineAwesome https://icons8.com/line-awesome
Moment JS https://momentjs.com/
Morris JS http://morrisjs.github.io/morris.js/
Parsley JS http://parsleyjs.org
Peity http://benpickles.github.io/peity
Perfect Scrollbar http://utatti.github.io/perfect-scrollbar/
Popper JS https://popper.js.org/
Quill https://quilljs.com/
Raphael http://dmitrybaranovskiy.github.io/raphael/
Select2 https://select2.org/
Spectrum https://bgrins.github.io/spectrum/
Typicons https://www.s-ings.com/typicons/


Customer Support

You can request for support via email or themeforest item comments.

We will assist you any problem you encounter while buidling your dashboard via Azia template

Email: themepixels@gmail.com

We use request help form in comments and email to manage customer support. Soon, as we grow, we will invest and find the best customer support system we can use to serve you better. For the meantime, submit a help request to the link given for any issues and concerns that you have. Don't worry, we will respond to you as quickly as we can. Thank you.



© 2017. Azia Documentation v1.1. All Rights Reserved. Created by: ThemePixels